<template>
  <div v-if="isShowAll">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="10" style="display: flex;align-items: center;">
          <el-col :span="6">
            <h3>全部粉丝</h3>
          </el-col>
          <el-col :span="4" :offset="14">
            <el-input
                placeholder="请输入用户名"
                v-model="searchKey">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="searchOne"/>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div v-if="fansList.length">
        <el-row
            v-for="(item, index) in fansList"
            :key="index"
            :gutter="10"
            style="
              margin-bottom: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid rgba(140,147,157,0.29);"
        >
          <el-col :span="1">
            <el-avatar :src="item.avatar"/>
          </el-col>
          <el-col :span="10" style="margin-left: 20px;">
            <div>
              <p style="display: flex; align-items: center;">
                <strong>{{item.userName}}</strong>
                <el-tag
                    v-if="item.isAdmin"
                    style="font-size: 12px;"
                    type="danger"
                    effect="plain"
                    size="small"
                >
                  管理员
                </el-tag>
              </p>
              <p><span>{{item.description || '该用户没有留下简介信息...'}}</span></p>
            </div>
          </el-col>
          <el-col :span="2" :offset="11">
            <el-button v-if="!item.isRemove" type="danger" @click="removeFans(item)">
              <span class="iconfont close"> 移除</span>
            </el-button>
            <el-button v-else type="info" disabled>
              <span> 已移除</span>
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div v-else> <el-empty description="您暂时没有粉丝哦！"/> </div>
    </el-card>
    <el-pagination
        v-if="total > params.limit"
        layout="prev, pager, next"
        :total="total"
        :page-size="params.limit"
        @current-change="changePage"
    />
  </div>

  <div v-else>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="10" style="display: flex;align-items: center;">
          <el-col :span="6">
            <el-button @click="goBack">返回</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="fansList.length">
        <div>
          <el-row
              v-for="(item, index) in fansList"
              :key="index"
              :gutter="10"
              style="
              margin-bottom: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid rgba(140,147,157,0.29);"
          >
            <el-col :span="1">
              <el-avatar :src="item.avatar"/>
            </el-col>
            <el-col :span="10" style="margin-left: 20px;">
              <div>
                <p style="display: flex; align-items: center;">
                  <strong>{{item.userName}}</strong>
                  <el-tag
                      v-if="item.isAdmin"
                      style="font-size: 12px;"
                      type="danger"
                      effect="plain"
                      size="small"
                  >
                    管理员
                  </el-tag>
                </p>
                <p><span>{{item.description || '该用户没有留下简介信息...'}}</span></p>
              </div>
            </el-col>
            <el-col :span="2" :offset="11">
              <el-button v-if="!item.isRemove" type="danger" @click="removeFans(item)">
                <span class="iconfont close"> 移除</span>
              </el-button>
              <el-button v-else type="info" disabled>
                <span> 已移除</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-else> <el-empty description="该用户不是您的粉丝！"/> </div>
    </el-card>
  </div>

</template>

<script>

import UserDetailService from '@/service/users/UserDetailService'

export default {
  name: "MyFans",
  data() {
    return {
      searchKey: '',
      isShowAll: true,
      fansList: [],
      userData: JSON.parse(sessionStorage.getItem('userData')),
      params: {
        limit: 5,
        offset: 0,
      },
      total: 0
    }
  },
  created() {
    this.getFansData()
  },
  methods: {
    async getFansData() {
      const res = await UserDetailService.getMyFans(this.params)
      this.total = res.data.data.total
      this.fansList = res.data.data.fansList
      this.fansList.forEach(item => {
        this.$set(item,'isRemove',false)
      })
    },
    changePage(page) {
      this.params.offset = (page - 1) * this.params.limit
      this.getAttentionData()
    },
    async searchOne(){
      if(!this.searchKey) return this.$message.warning('请输入用户名！')
      const res = await UserDetailService.getMyFans({searchKey: this.searchKey})
      this.fansList = res.data.data.fansList
      this.fansList.forEach(item => {
        this.$set(item,'isRemove',false)
      })
      this.searchKey = ''
      this.isShowAll = false
    },
    // 移除粉丝
    async removeFans(user){
      const res = await UserDetailService.removeFans(user._id)

      if (res.data.status === 200) {
        user.isRemove = true
        // 更新本地 sessionStorage 用户数据
        this.userData.userDetails.fans.splice(
            this.userData.userDetails.fans.indexOf(user._id),
            1
        )
        sessionStorage.setItem('userData', JSON.stringify(this.userData))
        this.$message.success(res.data.message)
      }else {
        this.$message.error(res.data.message)
      }
    },
    goBack(){
      this.getFansData()
      this.isShowAll = true
    }
  }
}
</script>

<style scoped>
i.el-input__icon {
  cursor: pointer;
  font-size: 20px;
}

i.el-input__icon:hover {
  color: #409EFF;
}

h3 {
  margin: 0;
  line-height: 1.5;
}

>>> .el-input__inner {
  border-radius: 36px !important;
}

.el-avatar {
  width: 60px;
  height: 60px;
}

.el-row {
  display: flex;
  align-items: center;
}

p {
  margin: 0;
  padding: 0;
}

p > strong {
  display: inline-block;
  margin-right: 10px;
  color: #e3487b;
  line-height: 1.5;
}

p > span {
  font-size: 14px;
  color: #8c939d;
}
</style>


